import React, { useState,useRef } from 'react'
// usecontext
/* 函数式组件 */
function Test0201() {
    const listobj = [
        { name: "张三", content: "水电费" },
        { name: "李四", content: "222" },
    ]
    const iname = useRef()
    const icontent = useRef()
    const [list, setList] = useState(listobj)
    const add = () => {
        const name = iname.current.value;
        const content = icontent.current.value;
        // es6的简写模式
        list.push({name,content})
        // list传址,里边的数据的不会改变地址的,需要给新的对象
        const nlist = [...list]
        setList(nlist)
    } 
    const del = (i) => {
        // splice(i,1) 下标,1个数
        list.splice(i,1);
        const nlist = [...list]
        setList(nlist)
    }
    // const del = (event) => {
    //     // splice(i,1) 下标,1个数
    //     console.log(event.target.getAttributeNode("cc").value)
    // }       
    return (
        <div>
            用户名 <br />
            <input type="text" ref={iname} /> <br />
            评论 <br />
            <input type="text" ref={icontent} /> <br />
            <button onClick={add}>提交</button> <br />
            评论回复 <br />
            <ul>
                {
                    list.map((item,i) => {
                        return (
                            <li key={i}>
                                <div>{item.name}---- <button onClick={() => del(i) }>删除</button> </div>
                                {/* <div>{item.name}---- <button cc={i}  onClick={del}>删除</button> </div> */}
                                <div>{item.content}</div>
                            </li>
                        )
                    })
                }

            </ul>
        </div>
    )
}
export default Test0201
